<!-- src/views/SensitiveRecords.vue -->


<script setup lang="ts">
import { ref } from "vue";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, } from "@/components/ui/table";
import { Button } from "@/components/ui/button";

const sensitiveRecords = ref([
  {
    id: 1,
    time: "2023-06-01 14:30:00",
    action: "修改密码",
    ip: "192.168.1.1",
    device: "iPhone 12",
  },
  {
    id: 2,
    time: "2023-05-30 09:15:00",
    action: "绑定新手机号",
    ip: "192.168.1.2",
    device: "MacBook Pro",
  },
  {
    id: 3,
    time: "2023-05-28 18:45:00",
    action: "更改安全问题",
    ip: "192.168.1.3",
    device: "iPad Air",
  },
  {
    id: 4,
    time: "2023-05-25 10:00:00",
    action: "注销账号请求",
    ip: "192.168.1.4",
    device: "Windows PC",
  },
]);
</script>

<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          敏感操作
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          敏感操作是指修改密码、设置/修改密保工具、账号冻结/解冻等可能影响到您账号安全的操作，如确定非您本人操作，建议您
          <Button variant="link" as="a" href="/account/information/password">
            修改密码
          </Button>
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>时间</TableHead>
                <TableHead>操作类型</TableHead>
                <TableHead>IP地址</TableHead>
                <TableHead>设备</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="record in sensitiveRecords" :key="record.id">
                <TableCell>{{ record.time }}</TableCell>
                <TableCell>{{ record.action }}</TableCell>
                <TableCell>{{ record.ip }}</TableCell>
                <TableCell>{{ record.device }}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
